import React, { useEffect, useState } from "react";
import request from "@/utils/request";
import { Cell, Image, List, Popup, Input } from "react-vant";
import { Comment } from "@react-vant/icons";
import AddEvaluate from "./evaluate/AddEvaluate";

// 评论页
const Evaluate = () => {
  // 获取全部评论
  const [datalist, setDatalist] = useState([]);
  const getData = async () => {
    const { data } = await request.get("/selAllcomment");
    setDatalist(data.data);
  };
  useEffect(() => {
    getData();
  }, []);
  console.log(datalist);

  //设置评论层是否隐藏
  const [evaVisible, setEvaVisible] = useState(false);
  return (
    <div style={{ overflowY: "auto", height: "65vh" }} className="evaluate">
      <List finished={true}>
        {datalist.map((item) => {
          return (
            <Cell.Group key={item.cid}>
              <Cell
                title={item.username}
                value={item.add_time.split("T")[0]}
                label={
                  <div>
                    {item.comment}
                    <Image width={60} height={60} src={item.comment_img} />
                  </div>
                }
              />
            </Cell.Group>
          );
        })}
      </List>
      <div style={{ position: "fixed", right: "5vw", top: "60vh" }}>
        <Comment
          style={{ fontSize: "25px" }}
          onClick={() => setEvaVisible(true)}
        />
      </div>
      <Popup
        title="添加评论"
        visible={evaVisible}
        closeable
        style={{ height: "50%" }}
        position="bottom"
        round
        onClose={() => setEvaVisible(false)}
      >
        <AddEvaluate />
      </Popup>
    </div>
  );
};

export default Evaluate;
